﻿@page
@model FytSoa.Web.Pages.FytAdmin.Shop.ActivityModifyModel
@{
    ViewData["Title"] = "活动管理";
    Layout = "~/Pages/FytAdmin/_Layout.cshtml";
}
<style>
    .help-block {
        color: #999;
        font-size: 12px;
        display: block;
        padding: 5px 0;
    }

    .form-cus {
        width: 70%;
        float: right;
    }

    .layui-form-item .layui-input-inline {
        width: 238px;
    }

    .cur-image {
        width: 24%;
        position: absolute;
        left: 25px;
        top: 0px;
        margin-bottom: 0px;
    }


        .cur-image .add-photo.default {
            height: 170px;
        }

        .cur-image .select-newimg {
            padding-top: 55px;
        }

        .cur-image .add-photo img {
            height: 170px;
        }

    .form-cus .layui-form-item.cell {
        display: table;
    }

        .form-cus .layui-form-item.cell .layui-inline {
            display: table-cell;
        }

    .widget-footer {
        border: 1px solid #f6f9fd !important;
        background-color: #f6f9fd;
        text-align: center;
        color: rgb(163, 175, 183);
    }

        .widget-footer span {
            display: block;
            line-height: 25px;
            color: #333;
        }
</style>
<div id="app">
    <form class="layui-form form-cus" action="" v-if="m">
        <div class="layui-form-item">
            <label class="layui-form-label">活动名称</label>
            <div class="layui-input-block">
                <input type="text" v-model="m.activityTitle" name="activityTitle" maxlength="500" lay-verify="required" lay-verType="tips" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">活动副名称</label>
            <div class="layui-input-block">
                <input type="text" v-model="m.subTitle" name="subTitle" maxlength="500" lay-verify="required" lay-verType="tips" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">时间范围：</label>
            <div class="layui-input-block">
                <input type="text" name="uptime" id="uptime" value="" placeholder="" lay-verify="required" lay-verType="tips" autocomplete="off" class="layui-input">
                <div class="input-tip">【必填项】秒杀，一定要填写小时分钟秒，例如12:00</div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">活动类型</label>
            <div class="layui-input-block">
                <input type="radio" name="yhtypes" value="1" title="秒杀" lay-filter="yhtypes" :checked="m.types==1?true:false">
                <input type="radio" name="yhtypes" value="2" title="团购" lay-filter="yhtypes" :checked="m.types==2?true:false">
                <input type="radio" name="yhtypes" value="3" title="其它" lay-filter="yhtypes" :checked="m.types==3?true:false">
                <div class="input-tip">“其它”可以作为例如热销，限购等活动系列使用</div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">活动状态</label>
            <div class="layui-input-block">
                <input type="checkbox" id="status" name="status" lay-skin="switch" lay-text="正常|失效">
            </div>
        </div>
        <div class="layui-form-item" v-show="m.types==2">
            <label class="layui-form-label">团购人数</label>
            <div class="layui-input-block row">
                <div class="layui-col-md4">
                    <input type="number" name="groupBuyNum" v-model="m.groupBuyNum" class="layui-input">
                </div>
                <div class="layui-col-md8">
                    <div class="layui-form-item">
                        <label class="layui-form-label">已参加人数</label>
                        <div class="layui-input-block">
                            <input type="number" name="groupBuyJoinNum" v-model="m.groupBuyJoinNum" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="input-tip">必须满足团购人数后，才允许支付订单</div>
            </div>
        </div>
        <ul class="addpic-list cur-image clearfix">
            <li>
                <div class="add-photo default">
                    <input class="imgv" v-model="m.cover" name="cover" id="cover" type="hidden">
                    <div class="select-newimg fyt-cloud " :class="m.cover?'layui-hide':''" data-text="headPic" data-img="imgShow" data-type="form">
                        <i class="icon-addphote"></i>
                        <span>活动宣传图</span>
                    </div>
                    <div class="add-photo-wall" :class="!m.cover?'layui-hide':''">
                        <img id="imgShow" :src="m.cover">
                        <div class="phote-edit">
                            <a class="photo-tool fyt-cloud" data-text="cover" data-img="imgShow" data-type="form" href="javascript:void(0)"><i class="layui-icon layui-icon-edit"></i>更换</a>
                            <a class="photo-tool last" href="javascript:void(0)" onclick="oc.deleteFile()"><i class="layui-icon layui-icon-delete"></i>删除</a>
                        </div>
                        <div class="cover">宣传图</div>
                    </div>
                </div>
            </li>

        </ul>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="submit" id="submit"><i class="layui-icon layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop layui-hide"></i>立即提交</button>
                <button type="button" class="layui-btn layui-btn-primary btn-open-close">取消</button>
            </div>
        </div>
    </form>
</div>
@section Scripts{
    <script>
        var oc, vm = new Vue({
            el: '#app',
            data: {
                m: {},
                list:[]
            }
        });
        layui.config({
            base: '/themes/js/modules/'
        }).use(['layer', 'jquery', 'common', 'form',  'laydate'], function () {
            var form = layui.form, $ = layui.jquery, os = layui.common
                , laydate = layui.laydate;
            vm.m.guid = os.getUrlParam('guid');
            laydate.render({
                elem: '#uptime'
                , type: 'datetime'
                , range: true
            });
            form.on('radio(yhtypes)', function (data) {
                vm.m.types = data.value;
            });
            os.cloudFile();
            var index = parent.layer.getFrameIndex(window.name);
            oc = {
                init() {
                    os.ajax('api/shop/activity/getmodel', { parm: vm.m.guid }, function (res) {
                        if (res.statusCode === 200) {
                            vm.m = res.data; console.log(vm.m);
                            $("#status").prop("checked", vm.m.status);
                            if (vm.m.beginTime) {
                                $('#uptime').val(vm.m.beginTime + ' - ' + vm.m.endTime);
                            }
                            vm.$nextTick(function () {
                                $("#types").val(vm.m.types); 
                                form.render();
                            });
                        } else {
                            os.error(res.message);
                        }
                    });
                },
                fileSave(v) {
                    $(".select-newimg").addClass('layui-hide');
                    $(".add-photo-wall").removeClass('layui-hide');
                    $('#logo').val(v);
                    $('#imgShow').attr('src', v);
                    vm.m.cover = v;
                },
                deleteFile() {
                    $(".select-newimg").removeClass('layui-hide');
                    $(".add-photo-wall").addClass('layui-hide');
                    $('#logo').val('');
                    $('#imgShow').attr('src', '');
                    vm.m.cover = "";
                }

            };
            oc.init();
            //监听提交
            form.on('submit(submit)', function (data) {
                $('#submit').attr('disabled', true).find('i').removeClass('layui-hide');
                var urls = "api/shop/activity/add";
                if (vm.m.guid) {
                    urls = "api/shop/activity/update";
                }
                if (data.field.uptime) {
                    vm.m.beginTime = data.field.uptime.split(" - ")[0];
                    vm.m.endTime = data.field.uptime.split(" - ")[1];
                }
                vm.m.status = data.field.status === 'on' ? true : false;
                os.ajax(urls, vm.m, function (res) {
                    $('#submit').attr('disabled', false).find('i').addClass('layui-hide');
                    if (res.statusCode == 200) {
                        parent.layer.close(index);
                    }
                    else {
                        os.error(res.message);
                    }
                });
                return false;
            });
            $(".btn-open-close").on('click', function () {
                parent.layer.close(index);
            });
        });
    </script>
}
